<script setup>
import {onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref} from "vue";

const count = ref(0)
const btn01 = ref()

// 生命周期钩子
onBeforeMount(() => {
  console.log('挂载之前：', count.value, '元素：', document.getElementById("btn01"))
})
onMounted(() => {
  console.log('挂载完毕：', count.value, '元素：', document.getElementById("btn01"))
})
onBeforeUpdate(() => {
  console.log('更新之前：', count.value, '元素值：', btn01.value.innerHTML)
})
onUpdated(() => {
  console.log('更新完毕：', count.value, '元素值：', btn01.value.innerHTML)
})
</script>

<template>
  <h2>vue生命周期</h2>

  <button id="btn01" ref="btn01" @click="count++"> {{ count }}</button>
</template>

<style scoped>
</style>